<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="绑定列表" width="800px" @ok="handleSubmit">
    <Description title="学生证详情" :collapseOptions="{ canExpand: true }" :column="2" :data="mockData" :schema="schema" />
    <BasicTable @register="registerTable" >
      <template #tableTitle>
        <a-button type="primary" @click="handleCreate" preIcon="ant-design:plus-outlined">绑定家长</a-button>
      </template>
      
       <template v-slot:bodyCell="{column, record}">
        <template v-if="column.dataIndex ==='action'">
          <TableAction :actions="getTableAction(record)" />
        </template>
      </template>

    </BasicTable>
    <BindParentModal @register="registerForm" @success="handleSuccess"></BindParentModal>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
  import { BasicTable, useTable, TableAction } from '/src/components/Table';
  import { Description,DescItem} from '/@/components/Description/index';
  import { useModal } from '/src/components/Modal';
  import BindParentModal from './BindParentModal.vue';
  import { columns } from '../Parent.data';
  import { list,unbind } from '../Parent.api';

  const mockData = ref({});

  const schema: DescItem[] = [
    {
      field: 'studentName',
      label: '学生姓名：',
    },
    {
      field: 'bindingPhone',
      label: '学生手机号：',
    },
    {
      field: 'imei',
      label: 'IMEI号：',
    },
    {
      field: 'onlineStatus',
      label: '在线状态：',
      render: (curVal,data) => {
        return `${data.onlineStatus && data.onlineStatus == '1' ? '在线' : '离线'}`;
      },
    },
    {
      field: 'activationStatus',
      label: '激活状态：',
      render: (curVal,data) => {
        return `${data.activationStatus && data.activationStatus == '1' ? '已激活' : '未激活'}`;
      },
    },
    {
      field: 'activationTime',
      label: '激活时间',
    },
    {
      field: 'useStatus',
      label: '使用状态',
      render: (curVal,data) => {
        return `${data.useStatus && data.useStatus == '1' ? '正常' : (data.useStatus == '2' ? '已用' : '已损坏')}`;
      },
    },
    {
      field: 'parBindingStatus',
      label: '家长绑定状态',
      render: (curVal,data) => {
        return `${data.parBindingStatus && data.parBindingStatus == '1' ? '已绑定' : '未绑定'}`;
      },
    },
    {
      field: 'disturbStatus',
      label: '上课免打扰',
      render: (curVal,data) => {
        return `${data.disturbStatus && data.disturbStatus == '1' ? '开启' : '未开启'}`;
      },
    },
    
  ];

  const imei = ref('');
  const cardId = ref('');
  const studentName = ref('');
  const bindingPhone = ref('');

  const [registerForm, {openModal}] = useModal();
  
  //添加设备model
  const [registerDrawer] = useDrawerInner(async (data) => {
    imei.value = data;
    imei.value = data.imei;
    cardId.value = data.cardId;
    studentName.value = data.studentName
    bindingPhone.value = data.bindingPhone
    mockData.value =data
    setProps({ searchInfo: { cardId: unref(data.cardId) } });
    reload();
  });
  
  const [registerTable, { reload, setProps }] = useTable({
    //需要配置rowKey，否则会有警告
    rowKey:'channelId',
    api: list,
    columns: columns,
    autoCreateKey:true,
    striped: true,
    bordered: true,
    showIndexColumn: false,
    showActionColumn:true,
    useSearchForm:false,
    pagination:false,
    canResize: false,
    immediate: false,
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      //slots: { customRender: 'action' },
      fixed: undefined,
    },
  });

  /**
   * 新增
   */
  function handleCreate() {
    openModal(true, {
      record:{imei:imei.value},
      isUpdate: false,
    });
  }


  /**
   * 删除
   */
  async function handleDelete(record) {
    await unbind({imei: imei.value,parentPhone:record.parentPhone}, handleSuccess);
  }

   function handleSuccess() {
      reload();
   }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '解绑',
        popConfirm: {
          title: '是否确认解绑',
          confirm: handleDelete.bind(null, record),
        },
      },
    ];
  }

   async function handleSubmit(v) {
        try {
            closeModal();
            //刷新列表
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
 
</script>
<style scoped lang="less">
  @prefix-cls: ~'@{namespace}-row-invalid';

  :deep(.@{prefix-cls}) {
    background: #f4f4f4;
    color: #bababa;
  }
</style>
